<template>
    <div style="width: 100%;height: 600px" v-loading="loadings">
      <el-drawer
        title="修改密码"
        :before-close="handleClose"
        :visible.sync="dialog"
        direction="rtl"
        custom-class="demo-drawer"
        ref="drawer"
      >
        <div class="demo-drawer__content" style="padding: 20px">
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="用户账号" :label-width="formLabelWidth">
              <el-input v-model="form.account" disabled="disabled"></el-input>
            </el-form-item>
            <!--<el-form-item label="用户昵称" :label-width="formLabelWidth" prop="name">-->
              <!--<el-input v-model="form.name" placeholder="请输入昵称"  maxlength="10" show-word-limit></el-input>-->
            <!--</el-form-item>-->
            <el-form-item label="原密码" :label-width="formLabelWidth" prop="psw">
              <el-input v-model="form.psw" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPsw">
              <el-input v-model="form.newPsw" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" :label-width="formLabelWidth" prop="affirmPsw">
              <el-input v-model="form.affirmPsw" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <!--<el-form-item label="用户分组" :label-width="formLabelWidth" prop="grouping">-->
              <!--<el-select v-model="form.grouping" placeholder="请选择用户分组" style="width: 100%">-->
                <!--<el-option label="区域一" value="shanghai"></el-option>-->
                <!--<el-option label="区域二" value="beijing"></el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="用户状态" :label-width="formLabelWidth" prop="state">-->
              <!--<el-select v-model="form.state" placeholder="请选择用户状态" style="width: 100%">-->
                <!--<el-option label="区域一" value="shanghai"></el-option>-->
                <!--<el-option label="区域二" value="beijing"></el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="用户备注" :label-width="formLabelWidth">-->
              <!--<el-input v-model="form.remark" placeholder="请输入备注"  maxlength="30" show-word-limit></el-input>-->
            <!--</el-form-item>-->
          </el-form>
          <div class="demo-drawer__footer" style="text-align: right;margin-top: 100px">
            <el-button @click="dialog = false">取 消</el-button>
            <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
          </div>
        </div>
      </el-drawer>
      <div id="cont">
        <h1>个人中心</h1>
        <p>
          <label>用户账号：</label> <span>{{data.bu_account}}</span>
        </p>
        <p>
          <label>用户昵称：</label> <span>{{data.bu_name}}</span>
        </p>
        <p>
          <label>用户分组：</label> <span>{{data.group_text}}</span>
        </p>
        <p>
          <label>用户状态：</label> <span style="color: #F56C6C">{{data.bu_status == 1 ? '正常':'禁用'}}</span>
        </p>
        <p>
          <label>创建时间：</label> <span>{{data.bu_create_time}}</span>
        </p>
        <!--<p v-if="data.bu_update_time">-->
          <!--<label>更新时间：</label> <span style="color: #F56C6C">{{data.bu_update_time}}</span>-->
        <!--</p>-->
        <!--<p v-if="data.bu_notes">-->
          <!--<label>用户备注：</label> <span>{{data.bu_notes}}</span>-->
        <!--</p>-->
        <p style="text-align: center;margin-top: 50px">
          <el-button type="primary" @click.native.prevent="amendFn">修改密码</el-button>
        </p>
      </div>
    </div>
</template>

<script>
    export default {
        data() {
          var validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.form.newPsw) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          };
            return {
              data:'',
              dialog: false,
              loading: false,
              loadings:true,
              direction: 'rtl',
              form:{
                account:'',
                name:'',
                psw:'',
                grouping:'',
                state:'',
                remark:'',
                newPsw:'',
                affirmPsw:''
              },
              rules: {
                name: [
                  { required: true, message: '请输入昵称', trigger: 'blur' },
                  { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ],
                newPsw: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { min: 6, max: 14, message: '长度在 6 到 14 个字符', trigger: 'blur' }
                ],
                psw: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { min: 6, max: 14, message: '长度在 6 到 14 个字符', trigger: 'blur' }
                ],
                // affirmPsw: [
                //   { required: true, message: '请输入密码', trigger: 'blur' },
                //   { min: 6, max: 14, message: '长度在 6 到 14 个字符', trigger: 'blur' }
                // ],
                affirmPsw:[
                  {validator: validatePass, trigger: 'blur' }
                ],
                grouping: [
                  { required: true, message: '请选择用户分组', trigger: 'change' }
                ],
                state: [
                  { required: true, message: '请选择用户状态', trigger: 'change' }
                ],
              },
              formLabelWidth:'80px'
            }
        },
        methods: {
          handleClose(done) {
            this.$confirm('确定要修改密码吗？')
              .then(_ => {
                this.loading = true;
                setTimeout(() => {
                  this.$refs['form'].validate((valid) => {
                    if (valid) {
                      let data = {
                        password:this.form.psw,
                        new_password:this.form.newPsw
                      };
                      let str = this.encryptionAesRsa(data);
                      let encryptData = str.split('%$#@zjt@#$%')[0];
                      let encryptKey = str.split('%$#@zjt@#$%')[1];
                      let incomData = {
                        map:'admin_user_update',
                        plum_session_api:localStorage.getItem('token'),
                        encryptData:encryptKey,
                        encryptKey:encryptData
                      };
                      this.$http.post('',incomData).then((data)=>{
                        if(data.ec==200){
                          盘(data);
                          this.$message.success(data.em);
                          this.loading = false;
                          this.form.psw = '';
                          this.form.newPsw = '';
                          this.form.affirmPsw = '';
                          done();
                          setTimeout(()=>{
                            this.exitLogin()
                          },1500)
                        }else if(data.ec==401){
                          this.$message.error(data.em);
                          setTimeout(()=>{
                            this.exitLogin();
                          },1500)
                        }else {
                          this.$message.error(data.em);
                          this.loading = false;
                        }
                      }).catch((err)=>{
                        this.$message.error('error!');
                      })
                    } else {
                      this.loading = false;
                      return false;
                    }
                  });
                }, 500);
              })
              .catch(_ => {});
          },
          amendFn:function () {
            this.dialog = true;
          },
          onSubmit:function () {

          },
          initPage:function () {
            let data = {};
            let str = this.encryptionAesRsa(data);
            let encryptData = str.split('%$#@zjt@#$%')[0];
            let encryptKey = str.split('%$#@zjt@#$%')[1];
            let incomData = {
              map:'admin_user_controller',
              plum_session_api:localStorage.getItem('token'),
              encryptData:encryptKey,
              encryptKey:encryptData
            };
            this.$http.post('',incomData).then((data)=>{
              if(data.ec==200){
                this.loadings = false;
                this.data = data.data;
                this.form.account = this.data.bu_account;
                this.form.name = this.data.bu_name;
              }else if(data.ec==401){
                this.$message.error(data.em);
                setTimeout(()=>{
                  this.exitLogin();
                },1500)
              }else {
                this.$message.error(data.em);
              }
            }).catch((err)=>{
              this.$message.error('error!');
            })
          }
        },
      created(){
        this.initPage()
      },
    }
</script>

<style scoped>
  #cont{
    width: 50%;
    text-align: left;
    margin-left: 25%;
  }
  #cont h1{
    width: 100%;
    font-size: 35px;
    padding: 30px;
    text-align: center;
  }
  #cont p {
    margin-top: 20px;
    line-height: 30px;
    height: 30px;
  }
  #cont p label{
    text-align: right;
    font-size: 18px;
    color: #000000;
    font-weight: 600;
    display: inline-block;
  }
  #cont p span{
    margin-left: 5px;
    font-size: 16px;
    color: #555555;
    vertical-align: middle;
  }
</style>
